<template>
  <div>
    <el-drawer
    v-model="isOpen"
    title="修改用户信息"
    :direction="direction"
    :before-close="handleClose"
  >
    <span>Hi, there!</span>
        <el-form :model="form" class="demo-ruleForm" size="large">

        <el-form-item required label="昵称" label-width="120px">
            <el-input v-model="form.username" type="text" autocomplete="off" placeholder="请输入.." />
        </el-form-item>

        <el-form-item required label="账号" label-width="120px">
            <el-input v-model="form.user" type="text" autocomplete="off"  placeholder="请输入.."  disabled />
        </el-form-item>

        <el-form-item required label="账户类型" label-width="120px">
            <el-input v-model="form.type" type="text" autocomplete="off"  placeholder="请输入.."  disabled />
        </el-form-item>

        <el-form-item required label="密码" label-width="120px">
            <el-input v-model="form.password" type="text" autocomplete="off" placeholder="请输入.." />
        </el-form-item>

        <el-form-item required label="联系电话" label-width="120px">
            <el-input v-model="form.phone" type="text" autocomplete="off" placeholder="请输入.." />
        </el-form-item>

        <el-form-item required label="地区" label-width="120px">
            <el-select v-model="form.province" class="m-2" placeholder="请选择.." size="large">
                    <el-option
                    v-for="item in china_city"
                    :key="item"
                    :label="item"
                    :value="item"
                    />
            </el-select>
        </el-form-item>

        <el-form-item required label="个性签名" label-width="120px">
            <el-input v-model="form.desc" type="textarea" :rows="5" autocomplete="off" placeholder="请输入.." />
        </el-form-item>
        </el-form>
        <!-- 按钮 -->
        <template #footer>
            <div style="flex: auto">
                <el-button @click="isOpen = false">取消</el-button>
                <el-button type="primary" @click="confirm">confirm</el-button>
            </div>
        </template>
  </el-drawer>
  <messageComp ref="ref_messageComp"></messageComp>
  </div>
</template>

<script setup>
import axios from "axios";
import messageComp from "../components/messageComp.vue";
const ref_messageComp = ref(null) //弹窗message组件refs
import { inject, ref } from 'vue';
import { ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
const store = useStore()
let isOpen = ref(false)
const direction = ref('rtl')
let form = ref({}) //表单数据 el-form
let china_city = ref(["北京", "上海", "天津", "重庆", "河北", "山西", "内蒙古", "辽宁", "吉林", "黑龙江", "江苏",
"浙江", "安徽", "福建", "江西", "山东", "河南", "湖北", "湖南", "广东", "广西", "海南", "四川",
"贵州", "云南", "西藏", "陕西", "甘肃", "宁夏", "青海", "新疆", "香港", "澳门",
"台湾", "Foreign"],)
const handleClose = (done) => {
  ElMessageBox.confirm('确认关闭吗？')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

const open = (data)=>{
    form.value = data
    isOpen.value = true
}
const confirm = ()=>{
    updateAPI()
    isOpen.value = false
}
const updateAPI =  () =>{
    // console.log(form.value);
    axios({
        method:'post',
        url:store.state.url + '/users/update',
        data:form.value,
    }).then(res=>{
        if (res.data.code == 200) {
            ref_messageComp.value.messageSuccess('修改完成')
            store.commit('userInfo',res.data.data)
        }else{
            ref_messageComp.value.messageFail('更新失败')
        }
    }).catch(err=>{
        ref_messageComp.value.messageNetFail('网络连接失败，请检查服务器')
    })
}
defineExpose({
    open,
    confirm
})
// const confirm = inject('confirm');
</script>

<style scoped>

</style>